<clr-stack-view>
    <clr-stack-header></clr-stack-header>
    <clr-stack-block *ngFor="let item of items"
                     [clrStackViewLevel]="1"
                     [clrStackViewSetsize]="items.length"
                     [clrStackViewPosinset]="1"
                     [clrSbExpandable]="true"
                     (clrSbExpandedChange)="loadChild(item)">
        <clr-stack-label>{{'APP_NAME'|translate}}</clr-stack-label>
        <clr-stack-content>{{item.name}}</clr-stack-content>

        <clr-stack-block *ngIf="item.loading" [clrStackViewLevel]="2" [clrStackViewSetsize]="0"
                         [clrStackViewPosinset]="1">
            <clr-spinner clrAssertive clrInline>
                Loading...
            </clr-spinner>
        </clr-stack-block>
        <clr-stack-block
                *ngFor="let tag of item.tags; let i = index"
                [clrStackViewLevel]="2"
                [clrStackViewSetsize]="item.tags.length"
                [clrStackViewPosinset]="i + 1">
            <clr-stack-label>tag</clr-stack-label>
            <clr-stack-content>{{tag}}</clr-stack-content>
        </clr-stack-block>
    </clr-stack-block>
</clr-stack-view>

